<template>
  <div class="user_container">
    <!-- header -->
    <div class="header">
      <div class="logo">
        <img src="../../assets/images/home/logo.png" alt="logo">
      </div>
      <div class="title">Saving</div>
      <div class="input">
        <van-cell-group inset>
          <van-field v-model="value" placeholder="" disabled />
        </van-cell-group>
      </div>
    </div>
    <!-- Account -->
    <div class="top_detail">
      <div class="top">
        <div class="title">Account</div>
      </div>
      <!-- Number -->
      <div class="contant">
        <div class="number">{{ '$99999999.99' }}</div>
      </div>
      <!-- Introduce -->
      <div class="bottom">
        <div class="trend">
          <img src="../../assets/images/home/trends.png" alt="trends">
        </div>
        <div>
          <span class="trends">{{ '0.0000000' }}</span>
          <span class="trends">Eth</span>
          <span class="trends">Today's Profit</span>
        </div>
      </div>
      <!-- Icon -->
      <div class="icon">
        <img src="../../assets/images/user/wicon.png" alt="wicon">
      </div>
      <!-- Precentage -->
      <div class="precentage">
        <img src="../../assets/images/user/up.png" alt="up">
        {{ '0.00%' }}
      </div>
      <!-- Center Card -->
      <div class="range">
        <div class="range_box" @click="handleRouter('/wallet')">
          <div class="img">
            <img src="../../assets/images/user/wallet.png" alt="wallet">
          </div>
          <div>Wallet</div>
        </div>
        <div class="range_box" @click="handleRouter('/loan')">
          <div class="img">
            <img src="../../assets/images/user/loan.png" alt="loan">
          </div>
          <div>Loan</div>
        </div>
        <div class="range_box" @click="handleRouter('/records')">
          <div class="img">
            <img src="../../assets/images/user/record.png" alt="record">
          </div>
          <div>Record</div>
        </div>
      </div>
    </div>
    <!-- Privacy & Security -->
    <!-- General -->
    <div class="general">
      <span>General</span>
      <van-cell @click="handleClick()" v-for="(item, index) in generalList" :key="index" :title="item.title"
        :icon="item.icon" is-link :to="item.path" />
      <span>Privacy & Security</span>
      <van-cell @click="handleClick()" title="Privacy Policy" center label="Focused on you safety and privacy"
        :icon="policy" is-link to="/policy" />
      <span>Settings</span>
      <van-cell @click="handleClick()" title="Change Language" center :icon="language" is-link to="/lang" />
    </div>
    <router-link></router-link>
  </div>
</template>

<script setup name='Home'>
import { reactive, ref, onMounted, defineEmits, defineProps, defineExpose } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userStore } from '@/store'
// 引入静态资源
import BTC from '@/assets/images/home/BTC.png'
import ETH from '@/assets/images/home/ETH.png'
import LTC from '@/assets/images/home/LTC.png'
import ATOM from '@/assets/images/home/ATOM.png'
import info1 from '@/assets/images/home/info1.png'
import info2 from '@/assets/images/home/info2.png'
import info3 from '@/assets/images/home/info3.png'
import notifications from '@/assets/images/user/notifications.png'
import invite from '@/assets/images/user/invite.png'
import support from '@/assets/images/user/support.png'
import faq from '@/assets/images/user/faq.png'
import policy from '@/assets/images/user/policy.png'
import language from '@/assets/images/user/language.png'

// 初始化仓库
const store = userStore()
// 变量区
const router = useRouter()
const route = useRoute()
// 搜索参数
const value = ref('')
// 比率
const list = ref([
  {
    title: 'BTC/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ETH/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ATOM/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'LTC/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'BTC/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ETH/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ATOM/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: '123',
    text: '123',
    img: BTC
  },
])
// scroll
const infoList = ref([
  {
    icon: info1,
    content: 'Rellable Security Guarantee'
  },
  {
    icon: info2,
    content: 'Stable andReliable Investment'
  },
  {
    icon: info3,
    content: 'Convenient  and Easy Operation'
  },
])
// General
const generalList = ref([
  {
    icon: notifications,
    title: 'Notifications',
    path: '/notifications'
  },
  {
    icon: invite,
    title: 'Invite Friends',
    path: '/invite'
  },
  {
    icon: support,
    title: 'Support',
    path: '/support'
  },
  {
    icon: faq,
    title: 'FAQ',
    path: '/faq'
  }
])

// 代码区
// 列表子级页面
const handleClick = () => {
  store.SET_PATH_DATA('no')

}

// 路由跳转
const handleRouter = (path) => {
  store.SET_PATH_DATA('no')
  router.push(`${path}`)

}


onMounted(() => {

})

// 将组件中的数据进行暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
.user_container {
  .header {
    margin-left: 35px;
    width: 90%;
    height: 98px;
    line-height: 98px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    z-index: 9;

    .logo {
      width: 50px;
      height: 50px;
      margin-top: -5px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      font-size: 36px;
      font-weight: 700;
      margin-left: -200px;
      line-height: 98px;
      margin-top: -10px;
    }

    .input {
      width: 3.61333rem;
      height: 40px;
    }

    .van-cell-group--inset {
      margin: 0px;
      border-radius: 20px;
      border: 1px solid #eee;
    }
  }

  .top_detail {
    position: relative;
    width: 689px;
    height: 448px;
    background: url('../../assets/images/user/header.png') no-repeat;
    background-size: 100%;
    margin-top: 20px;
    margin-left: 30px;

    .top {
      width: 100px;
      height: 50px;
      line-height: 50px;
      position: absolute;
      top: 40px;
      left: 20px;

      .title {
        position: absolute;
        font-size: 25px;
        color: #fff;
        top: 35px;
        left: 45px;
      }
    }

    .contant {
      position: absolute;
      width: 100%;

      .number {
        position: absolute;
        font-size: 48px;
        color: #fff;
        left: 80px;
        top: 150px;
        font-weight: 700;
      }
    }

    .bottom {
      display: flex;
      position: absolute;
      left: 80px;
      top: 210px;

      .trend {
        width: 35px;
        height: 35px;
        margin-top: 10px;

        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }

      .trends {
        color: #fff;
        font-size: 18px;
        margin-left: 10px;
        font-weight: 600;
      }

      .day {
        color: #fff;
        font-size: 18px;
        font-weight: normal;
        margin-left: 10px;
      }
    }

    .icon {
      position: absolute;
      right: 60px;
      top: 20px;
      width: 64px;
      height: 44px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .precentage {
      position: absolute;
      right: 50px;
      top: 130px;
      width: 130px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      background: #99bbfb;
      font-size: 20px;
      color: #fff;
      border-radius: 40px;

      img {
        width: 17px;
        height: 15px;
      }
    }

    .range {
      position: absolute;
      top: 310px;
      display: flex;
      justify-content: space-around;
      width: 75%;
      background: #fff;
      height: 160px;
      border-radius: 20px;
      margin-left: 90px;
      color: #000;
      font-size: 20px;

      .range_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .img {
          width: 44px;

          height: 44px;

          img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
        }
      }
    }
  }

  .general {
    margin-top: 30px;

    span {
      font-size: 26px;
      color: #9F9F9F;
      margin-left: 30px;
      display: block;
      margin-bottom: 20px;
      margin-top: 20px;
    }

    :deep .van-cell__left-icon {
      margin-top: 4px;
      height: 100%;
    }
  }
}
</style>